<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"
	isELIgnored="false" session="true"%>

<%@taglib prefix="s" uri="/struts-tags"%>

<%
	String path = request.getContextPath();

	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>6100:维护工艺路线</title>
<!-- Bootstrap -->
<style>
*{
  margin:0px;
  padding:0px;
  font-size:14px;
  font-family:Microsoft YaHei;
}
.left {
	float: left;
}
body {
	padding-top: 70px!important;
	/* 60px to make the container go all the way to the bottom of the topbar */
}
.keyClass {
	color: blue;
	font-weight: bold;
}
#pathListDiv {
	position: absolute;
	height: 75%;
}
#pathListGrd {
	position: absolute;
	height: 75%;
}
#pathItemListDiv {
	position: absolute;
	height: 30%;
}
#pathItemListGrd { /*position:absolute;*/
	height: 30%;
}
#pathItemForm {
	position: absolute;
	/*margin-top: 502px;*/
}
#pathConditionForm .control-group {
	margin-bottom: 5px;
}
#queryPamForm .control-group {
	margin-bottom: 3px;
}
#dialogpathItemForm .control-group {
	margin-bottom: 3px;
}
#qrsListForm .control-group {
	margin-bottom: 3px;
}
#dialogPamItemForm .control-group {
	margin-bottom: 3px;
}
/* #queryPathDialog {
		    margin-left: 10%;
	        left: 10%;
		  }*/
#pathItemDialog {
	margin-left: 10%;
	left: 10%;
}
#branchPathDialog, #branchPathModalDialog {
	margin-left: 10%;
	left: 4%;
	width: 85%;
}
.keyCss:after {
	float: right;
	content: '*';
	color: red;
	/* margin-left: 2px; */
}
/* widget jsplumb css*/
#mainDiv{
  width:1100px;
  height:540px;
  border:1px solid lightgray;
  position: absolute;
  top:120px;
  left:100px;
  box-shadow:  5px 5px 2px 2px #666;
}
#leftDiv,#rightDiv{
  height: 540px;
}
#leftDiv{
  float:left;
  width:100px;
  background-color:#84ACB3;
}
.model,.lineModel{
  list-style-type: none;
  line-height: 38px;
  text-align: center;
  width:80px;
  color:#FFF;
  /* background-color: #234B5E; */
  border-radius: 10px;
  margin:5px 10px;
}
.modelUl li:hover,.lineUl li:hover{
  background-color: #577A8B;
}
#rightDiv{
  width:1000px;
  position: absolute;
  left:100px;
  overflow-y: scroll;
  overflow-x: scroll;
}
.labelClass{
	background-color:snow;
    opacity: 0.5
}
.modelOut:hover{
  fill:#ccc;
}
.modelIn:hover{
  opacity: 0.9
}
#chartInfoDialog .modal-body{
  max-height: 400px;
  overflow-y: scroll;
}
.colorUl li{
    margin:5px 10px;
}
.colorUl li input{
  width:80px;
  height:30px;
}
#colorInput{
  border:none;
  width:80px;
  height:40px;
}
.editWidget,.delWidget{
  width:20px;
  float:left;
  margin:0px 10px;
}
.radio-inline{
  margin-bottom: 10px;
}
input[type=color]{
  padding:0px;
}
.nav{
  height: 50px!important;
}
.navbar-nav>li>a{
  padding-top: 15px!important;
}
</style>
<%-- <%@ include file="/page/comPage/comCSS.html"%> --%>
<link rel="stylesheet" href="resources/widget/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="resources/widget/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="resources/widget/jsPlumb/css/jsPlumbToolkit-defaults.css">
<link rel="stylesheet" href="resources/widget/jsPlumb/css/main.css">
<link rel="stylesheet" href="resources/widget/jsPlumb/css/jsPlumbToolkit-demo.css">
<%-- <link rel="stylesheet" href="resources/widget/jquery_ui/jquery-ui.min.css"> --%>
<link rel="stylesheet" href="resources/widget/jquery_ui/jquery-ui.1.12.min.css">
<%@ include file="/page/comPage/navbar.html"%>
</head>
<body>
	<div class="container">
		<button class="btn btn-info" id="f1_query_btn">查询</button>
		<button class="btn btn-danger" id="f4_del_btn">删除</button>
		<!-- <button class="btn btn-primary" id="f6_add_btn">新增</button> -->
		<button class="btn btn-primary" id="f8_regist_btn">保存</button>
		<button class="btn btn-warning" id="f10_clear_btn">清除</button>
	</div>

	<div class="container">

<!-- 		<div class="container-fluid">
			<div id="tittle">
				<h3>工艺流程信息</h3>
			</div>
		</div> -->

<!-- 		<div class="col-md-4">


			<div id="pathListDiv" class="col-lg-12">

				<table id="pathListGrd"></table>

				<div id="pathListPg"></div>

			</div>

		</div> -->
<%-- 		<div class="col-md-8">
			<div class="form-group">
				<form id="pathConditionForm" class="row col-lg-12 form-horizontal">

					<div class="control-group col-lg-6">
						<label class="control-label col-lg-6 keyCss" for="pathIDTxt">
							工艺路线 </label>
						<div class="col-lg-6">
							<input type="text" id="pathIDTxt" class="form-control" />
						</div>
					</div>
					<div class="control-group col-lg-6">
						<label class="control-label col-lg-6 keyCss" for="pathVerTxt">
							工艺路线版本 </label>
						<div class="col-lg-6">
							<input type="text" id="pathVerTxt" class="form-control" />
						</div>
					</div>

					<div class="control-group col-lg-12">
						<label class="control-label col-lg-3" for="pathDscTxt">工艺路线描述
						</label>
						<div class="col-lg-9">
							<input type="text" id="pathDscTxt" class="form-control" />
						</div>
					</div>

					<div class="control-group col-lg-6">
						<label class="control-label col-lg-6 keyCss" for="pathCateSel">
							工艺类别 </label>
						<div class="col-lg-6">
							<select id="pathCateSel" class="form-control"></select>
						</div>
					</div>
					<div class="control-group col-lg-6">
						<label class="control-label col-lg-6 keyCss" for="mdlCateSel">工艺属性
						</label>
						<div class="col-lg-6">
							<select id="mdlCateSel" class="form-control"></select>
						</div>
					</div>
					<div class="control-group col-lg-6">
						<label class="control-label col-lg-6 keyCss" for="startBankSel">
							起始仓位 </label>
						<div class="col-lg-6">
							<select id="startBankSel" class="form-control"></select>
						</div>
					</div>

					<div class="control-group col-lg-6">
						<label class="control-label col-lg-6 keyCss" for="endBankSel">
							结束仓位 </label>
						<div class="col-lg-6">
							<select id="endBankSel" class="form-control"></select>
						</div>
					</div>

				</form>
			</div>
		</div> --%>


<!-- add jsplumb by liufang -->				
	<div id="mainDiv">
		<div id="leftDiv">
			<ul class="modelUl">
				<!-- <li class="model" id="modelOne">终结符</li>
				<li class="model" id="modelTwo">判定</li>
				<li class="model" id="modelThree">流程</li>
				<li class="model" id="modelFour">数据</li> -->
				<li class="model" id="modelOne">
<!-- 				    <svg width="100" height="60">
					  <ellipse cx="50" cy="30" rx="50" ry="20" fill="#234B5E" id="ellipseModel"/>
					  <text  x="50" y="35" text-anchor="middle" fill="#fff">终结符</text>
					</svg> -->
					
					<svg width="80" height="40">
					  <ellipse cx="40" cy="20" rx="40" ry="18" fill="#234B5E" id="ellipseModel"/>
					  <text  x="40" y="25" text-anchor="middle" fill="#fff">终结符</text>
					</svg>
				</li>
				<li class="model" id="modelTwo">
<!-- 					<svg width="100" height="60">
					  <path d="M 0,30 L 50,0 L 100,30 L50,60 Z" fill="#234B5E" id="pathModel" />
					  <text  x="50" y="35" text-anchor="middle" fill="#fff">判定</text>
					</svg> -->
					<svg width="80" height="40">
					  <path d="M 0,20 L 40,0 L 80,20 L40,40 Z" fill="#234B5E" id="pathModel" />
					  <text  x="40" y="25" text-anchor="middle" fill="#fff">判定</text>
					</svg>					
				</li>
				<li class="model" id="modelThree">
<!-- 					<svg width="100" height="60">
					  <rect  x="0" y="0" width="100" height="60" fill="#234B5E" id="rectModel"/>
 					  <text  x="50" y="35" text-anchor="middle" fill="#fff">流程</text>
					</svg> -->
					<svg width="80" height="40">
					  <rect  x="0" y="0" width="80" height="40" fill="#234B5E" id="rectModel"/>
 					  <text  x="40" y="25" text-anchor="middle" fill="#fff">流程</text>
					</svg>					
				</li>
				<li class="model" id="modelFour">
<!-- 					<svg width="100" height="60">
					  <rect  x="10" y="10" width="80" height="50" fill="#234B5E" id="rectModel"/>
 					  <text  x="55" y="35" text-anchor="middle" fill="#fff">数据</text>
					</svg> -->	
					<svg width="80" height="40">
					  <rect  x="5" y="5" width="70" height="35" fill="#234B5E" id="rectModel"/>
 					  <text  x="40" y="30" text-anchor="middle" fill="#fff">数据</text>
					</svg>			
				</li>
				<li class="model" id="modelFive">
					
					<svg width="80" height="40">
					  <ellipse cx="40" cy="20" rx="40" ry="18" fill="#234B5E" id="startEllipseModel"/>
					  <text  x="40" y="25" text-anchor="middle" fill="#fff">Start</text>
					</svg>
				</li>		
				<li class="model" id="modelSix">
					<svg width="80" height="40">
					  <ellipse cx="40" cy="20" rx="40" ry="18" fill="#234B5E" id="endEllipseModel"/>
					  <text  x="40" y="25" text-anchor="middle" fill="#fff">End</text>
					</svg>
				</li>							
			</ul>
			<ul class="lineUl">
							
				<li class="lineModel" id="straightLineType">
<!-- 					<svg width="100" height="30">
					  <line x1="0" y1="18" x2="70"  y2="18" style="stroke:#234B5E;stroke-width:2" id="straightLineModel"/>
 					  <text  x="80" y="18" text-anchor="middle" fill="#fff">直线</text>
					</svg> -->	
					<svg width="80" height="20">
					  <line x1="0" y1="12" x2="70"  y2="12" style="stroke:#234B5E;stroke-width:2" id="straightLineModel"/>
 					  <!-- <text  x="80" y="18" text-anchor="middle" fill="#fff">直线</text> -->
					</svg>					
				</li>
				
				<li class="lineModel" id="polylineType">
<!-- 					<svg width="100" height="30">
					  <polyline  points="0,30 20,10 45,30 70,0" style="fill:none;stroke:#234B5E;stroke-width:3" id="curveLineModel" />
					  <text  x="85" y="15" text-anchor="middle" fill="#fff">折线</text>
					</svg> -->
					<svg width="80" height="20">
					  <polyline  points="0,20 20,0 45,20 70,0" style="fill:none;stroke:#234B5E;stroke-width:3" id="curveLineModel" />
					  <!-- <text  x="85" y="15" text-anchor="middle" fill="#fff">折线</text> -->
					</svg>					
				</li>	
				
				<li class="lineModel" id="curveType">
<!-- 					<svg width="100" height="30">
					  <path  d="M 0 10 q 50 30 70 0" style="fill:none;stroke:#234B5E;stroke-width:3" id="lineModel" />
					  <text  x="85" y="20" text-anchor="middle" fill="#fff">曲线</text>
					</svg> -->
					<svg width="80" height="20">
					  <path  d="M 0 0 q 40 20 70 0" style="fill:none;stroke:#234B5E;stroke-width:3" id="lineModel" />
					  <!-- <text  x="85" y="20" text-anchor="middle" fill="#fff">曲线</text> -->
					</svg>					
				</li>				
				<!-- 增加线型       : 实线  虚线 -->
				<!-- 增加4个种类 : 四种类型的现 -->
				
				
				<!-- TODO: 颜色拾取器 -->
				
			</ul>
<!-- 			<ul class="colorUl">
			    <li><input type="color" id="colorInput" name="color"/></li>
			</ul> -->
		</div>
		<div id="rightDiv"></div>
	</div>		
		
	</div>
	<!-- 查询Path -->
	<div id="queryPathDialog" class="modal fade" tabindex="-1"
		role="dialog" aria-labelledby="title" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title">查询条件</h4>
				</div>
				<!--Modal header-->
				<div class="modal-body">
					<!-- <div class="row"> -->
					<form id="queryPathForm" class="row form-horizontal">
						<div class="control-group ">
							<label class="control-label col-lg-4"
								for="queryPathDialog_pathCateTxt"> 工艺类别 </label>
							<div class="col-lg-6">
								<input type="text" id="queryPathDialog_pathCateTxt"
									class="form-control" />
							</div>
						</div>

						<div class="control-group">
							<label class="control-label col-lg-4"
								for="queryPathDialog_pathIDTxt"> 工艺路线 </label>
							<div class="col-lg-6">
								<input type="text" id="queryPathDialog_pathIDTxt"
									class="form-control" />
							</div>
						</div>
						<div class="control-group">
							<label class="control-label col-lg-4"
								for="queryPathDialog_pathVerTxt"> 工艺路线版本 </label>
							<div class="col-lg-6">
								<input type="text" id="queryPathDialog_pathVerTxt"
									class="form-control" />
							</div>
						</div>
					</form>
					<!-- </div> -->
				</div>
				<!--Modal body-->
				<div class="modal-footer">
					<a id="queryPathDialog_cancelBtn" class="btn" data-dismiss="modal">
						取消 </a> <a id="queryPathDialog_queryBtn" class="btn btn-primary">
						查询 </a>
				</div>
				<!--Modal footer-->
			</div>
		</div>
	</div>
</body>
<%-- <%@ include file="/page/comPage/comJS.html"%> --%>
<script type="text/javascript" src="resources/widget/jquery/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="resources/widget/jquery_ui/jquery-ui.1.12.min.js"></script>
<script type="text/javascript" src="resources/widget/bootstrap3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="resources/widget/d3/d3.min.js"></script>
<script type="text/javascript" src="resources/widget/jsPlumb/lib/jsBezier-0.8.js"></script>
<script type="text/javascript" src="resources/widget/jsPlumb/lib/mottle-0.7.2.js"></script>
<script type="text/javascript" src="resources/widget/jsPlumb/lib/biltong-0.3.js"></script>
<script type="text/javascript" src="resources/widget/jsPlumb/lib/katavorio-0.17.0.js"></script>
<script type="text/javascript" src="resources/widget/jsPlumb/src/util.js"></script>
<script type="text/javascript" src="resources/widget/jsPlumb/src/browser-util.js"></script>
<script type="text/javascript" src="resources/widget/jsPlumb/src/jsPlumb.js"></script>
<script type="text/javascript" src="resources/widget/jsPlumb/src/dom-adapter.js"></script>
<script type="text/javascript" src="resources/widget/jsPlumb/src/overlay-component.js"></script>
<script type="text/javascript" src="resources/widget/jsPlumb/src/endpoint.js"></script>
<script type="text/javascript" src="resources/widget/jsPlumb/src/connection.js"></script>
<script type="text/javascript" src="resources/widget/jsPlumb/src/anchors.js"></script>
<script type="text/javascript" src="resources/widget/jsPlumb/src/defaults.js"></script>
<script type="text/javascript" src="resources/widget/jsPlumb/src/connectors-bezier.js"></script>
<script type="text/javascript" src="resources/widget/jsPlumb/src/connectors-statemachine.js"></script>
<script type="text/javascript" src="resources/widget/jsPlumb/src/connectors-flowchart.js"></script>
<script type="text/javascript" src="resources/widget/jsPlumb/src/renderers-svg.js"></script>
<script type="text/javascript" src="resources/widget/jsPlumb/src/base-library-adapter.js"></script>
<script type="text/javascript" src="resources/widget/jsPlumb/src/dom.jsPlumb.js"></script>
<script type="text/javascript" src="resources/widget/jquery_ui/jquery.ui-1.12.contextmenu.min.js"></script>
<script src="js/com/SelectDom.js"></script>
<script type="text/javascript" src="js/page/6000/6101.js"></script>
<script type="text/javascript" src="js/com/widgetDefine.js"></script>
</html>